<script lang="ts" setup>
const props = defineProps({
  cartPopupVisible: {
    type: Boolean,
    default: false,
  },
  cartList: {
    type: Array,
    default: [],
  }
})
const emit = defineEmits(['close','onCartUpdate','onCartDel','onCartClear'])
const handleClose = () => {
  emit('close')
}
const handCartUpdate = (item:any,type:string)=>{
  if(type === 'dec' && item.goods_num == 1){
    emit('onCartDel',{
      cart_ids: item.id,
    })
    return;
  }
  emit('onCartUpdate',{
    goods_id: item.goods_id,
    goods_sku_price_id: item.goods_sku_price_id,
    material_index: item.material_index,
    goods_num: 1,
    type: type
  })
}
const handleCartClear = ()=>{
  emit('onCartClear')
}
</script>
<template>
     <up-popup
      mode="bottom"
      @close="handleClose"
      :show="props.cartPopupVisible"
      class="cart-popup"
    >
      <view class="top">
        <u-text
          @tap="handleCartClear"
          color="#fff"
          text="清空"
          align="right"
        ></u-text>
      </view>
      <scroll-view class="cart-list" scroll-y>
        <view class="wrapper">
          <view class="item" v-for="item in props.cartList" :key="item.id">
            <view class="left">
              <view class="name">{{ item.goods_name }}</view>
              <view class="props">{{ item.snapshot_description }}</view>
            </view>
            <view class="center">
              <text>￥{{ item.snapshot_price }}</text>
            </view>
            <view class="right">
              <up-icon
                  name="minus-circle"
                  size="20"
                  color="#999"
                  @tap="handCartUpdate(item,'dec')"
              ></up-icon>
              <view class="number">{{ item.goods_num }}</view>
              <up-icon
                name="plus-circle-fill"
                size="20"
                color="#f0ad4e"
                @tap="handCartUpdate(item,'inc')"
              ></up-icon>
            </view>
          </view>
        </view>
      </scroll-view>
    </up-popup>
</template>

<style lang="scss" scoped>
  .cart-popup {
  .top {
    background-color: $uni-color-warning;
    color: $uni-color-warning;
    padding: 10rpx 30rpx;
    font-size: 24rpx;
    text-align: right;
  }
  .cart-list {
    background-color: #ffffff;
    width: 100%;
    overflow: hidden;
    min-height: 1vh;
    max-height: 60vh;

    .wrapper {
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0 30rpx;
      margin-bottom: 226rpx;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        position: relative;

        &::after {
          content: " ";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: $uni-border-color;
          height: 2rpx;
          transform: scaleY(0.6);
        }

        .left {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          margin-right: 30rpx;

          .name {
            font-size: $uni-font-size-sm;
            //	color: $uni-text-color-base;
          }
          .props {
            //	color: $uni-text-color-assist;
            font-size: 24rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .center {
          margin-right: 120rpx;
          //font-size: $uni-font-size-base;
        }

        .right {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .btn {
            width: 46rpx;
            height: 46rpx;
            border-radius: 100%;
            padding: 0;
            text-align: center;
            line-height: 46rpx;
          }
          .active-btn {
            background: #f0ad4e;
          }
          .no-active-btn {
            border: 2rpx solid #ddd;
          }
          .number {
            //font-size: $uni-font-size-base;
            width: 46rpx;
            height: 46rpx;
            text-align: center;
            line-height: 46rpx;
          }
        }
      }
    }
  }
}
</style>